<template>
  <div class="add">
    <div class="header" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c1">添加优惠券</span>
      <el-button class="return" icon="el-icon-arrow-left" @click="returnPage">返回</el-button>
    </div>

    <div class="container" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2">添加优惠券</span>
    </div>

    <div class="foot">
      <el-form ref="form" :model="form" :label-width="formLabelWidth" :rules="rule" style="text-align:left;margin:5% 5%">
        <el-form-item label="优惠券名称：" prop="couponName">
          <el-input v-model="form.couponName" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>

        <el-form-item label="开始时间:" prop="startDate">
          <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="请选择开始日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间:" prop="endDate">
          <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="请选择结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="上线/下线:" prop="online">
          <el-radio v-model="form.online" label="2">上线</el-radio>
          <el-radio v-model="form.online" label="3">下线</el-radio>
        </el-form-item>

        <el-form-item label="发放数量：" prop="issueQuantity">
          <el-input v-model="form.issueQuantity"></el-input>
        </el-form-item>

        <el-form-item label="获取方式：" prop="grant">
          <el-select class="fa" v-model="form.grant" placeholder="全部">
            <el-option label="全部" :value=0></el-option>
            <el-option label="自动发放" :value=2></el-option>
            <el-option label="活动领取" :value=3></el-option>
            <el-option label="人工发放" :value=4></el-option>
            <el-option label="无限制" :value=5></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 5%">
          <el-button @click="tijiao(form)">提交</el-button>
          <el-button @click="chongzhi(form)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "addCoupon",
  data(){
    return{
      rule:{
        couponName:[
          {required:true ,message:'优惠券名称不能为空'},
          {message: '优惠券名称不能为空'}
        ],
        startDate:[
          {required:true ,message:'开始时间不能为空'},
        ],
        endDate:[
          {required:true ,message:'结束时间不能为空'},
        ],
        online:[
          {required:true,message:'优惠券状态不能为空'},
        ],
        grant:[
          {required:true ,message:'优惠券数量不能为空'},
        ],
        issueQuantity:[
          {required:true ,message:'获取方式不能为空'},
        ],
      },
      form: {
        couponName: '',
        startDate: '',
        endDate: '',
        online: '1',
        grant:'',
        issueQuantity: '',
        note:''
      },
      formLabelWidth:'350px',
    }
  },
  methods:{
    //返回
    returnPage(){
      if (window.history.length <= 1) {
        this.$router.push({ path: "/system/storageManagement" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //重置
    chongzhi(){
      this.form.couponName = '',
      this.form.startDate = '',
      this.form.endDate = '',
      this.form.online = '',
      this.form.grant = '',
      this.form.issueQuantity = '',
      this.form.note = '';
    },
    //提交
    tijiao(form){
      console.log(form);
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.$http.post("/coupon/addCoupon", {couponName:form.couponName
            ,startDate:form.startDate
            ,endDate:form.endDate
            ,online:form.online
            ,issueQuantity:form.issueQuantity
            ,grant:form.grant})
              .then(res => {
                this.chongzhi();
                console.log('请求成功');
              }).catch(error => {  // 请求失败
            console.log('请求失败123')
          });
        }else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
  .add {
    background-color: #F6F7F9;
    height: 100%;
    margin: 0px -20px 0px -40px;
  }
  .header {
    margin: -20px 0px 0px 20px;
    height: 60px;
    border: 1px solid #E5E5E5;
  }

  .c1 {
    float: left;
    line-height: 40px;
    margin: 10px 0px 0px 20px;
  }

  .c2 {
    float: left;
    margin: 20px 0px 0px 30px;
  }
  .foot {
    margin: 0px 80px 0px 20px;
    height: 600px;
    background-color: white;
  }
  .container {
    margin: 20px 80px 0px -0px;
    height: 60px;
    border: 1px solid #E5E5E5;
  }

  .return {
    margin: 10px 0px 0px 900px;
  }
  .el-input {
    width: 220px;
  }
</style>